<script setup lang="ts">
// 带方向的小球
// https://www.cornerstonejs.org/live-examples/orientationmarker
import { onMounted, ref } from 'vue'
import { NButton } from 'naive-ui'
import {
  RenderingEngine,
  Types,
  Enums,
  setVolumesForViewports,
  volumeLoader,
  utilities,
  geometryLoader,
  CONSTANTS,
  eventTarget
} from '@cornerstonejs/core'
import {
  initDemo,
  createImageIdsAndCacheMetaData,
  setTitleAndDescription,
  downloadSurfacesData,
  addButtonToToolbar,
  addLabelToToolbar, addManipulationBindings
} from '@/helpers'

import * as cornerstoneTools from '@cornerstonejs/tools'
import { OrientationMarkerTool, PanTool, TrackballRotateTool, ZoomTool } from '@cornerstonejs/tools'

const {
  ToolGroupManager,
  Enums: csToolsEnums
} = cornerstoneTools
const { MouseBindings } = csToolsEnums
const { ViewportType, GeometryType } = Enums

// [ "ANNOTATED_CUBE", "AXES", "CUSTOM" ]
// console.log(Object.keys(OrientationMarkerTool.OVERLAY_MARKER_TYPES))

const prefix = 'volume-viewer-network'
const ids = {
  volumeId: `${prefix}-volumeId`,
  renderingEngineId: `${prefix}-renderEngine`,
  viewportId: `${prefix}-viewportId`,
  toolsGroupId: `${prefix}-toolsGroupId`
}


const renderContainerRef = ref(null)
let renderingEngine
const volumeId = ids.volumeId // VolumeId with loader id + volume id
const renderingEngineId = ids.renderingEngineId
const viewportId = ids.viewportId
const toolGroupId = ids.toolGroupId
let viewport


async function run() {
  // Init Cornerstone and related libraries
  await initDemo()


  // Define a tool group, which defines how mouse events map to tool commands for
  // Any viewport using the group
  const toolGroup = ToolGroupManager.createToolGroup(toolGroupId)

  // Add the tools to the tool group and specify which volume they are pointing at
  // addManipulationBindings(toolGroup, {
  //   is3DViewport: true,
  // });

  cornerstoneTools.addTool(OrientationMarkerTool)
  toolGroup.addTool(PanTool.toolName)
  toolGroup.addTool(ZoomTool.toolName)
  toolGroup.addTool(OrientationMarkerTool.toolName)
  toolGroup.addTool(TrackballRotateTool.toolName)


  toolGroup.setToolActive(ZoomTool.toolName, {
    bindings: [{ mouseButton: MouseBindings.Secondary }]
  })
  toolGroup.setToolActive(PanTool.toolName, {
    bindings: [
      {
        mouseButton: MouseBindings.Auxiliary
      }
    ]
  })

  toolGroup.setToolActive(TrackballRotateTool.toolName, {
    bindings: [
      {
        mouseButton: MouseBindings.Primary
      }
    ]
  })

  // Get Cornerstone imageIds and fetch metadata into RAM
  const imageIds = await createImageIdsAndCacheMetaData({
    StudyInstanceUID:
      '1.3.6.1.4.1.14519.5.2.1.7009.2403.871108593056125491804754960339',
    SeriesInstanceUID:
      '1.3.6.1.4.1.14519.5.2.1.7009.2403.367700692008930469189923116409',
    wadoRsRoot: 'https://domvja9iplmyu.cloudfront.net/dicomweb'
  })

  // Instantiate a rendering engine
  renderingEngine = new RenderingEngine(renderingEngineId)

  // Create the viewports

  const viewportInputArray = [
    {
      viewportId: viewportId,
      type: ViewportType.VOLUME_3D,
      element: renderContainerRef.value,
      defaultOptions: {
        orientation: Enums.OrientationAxis.CORONAL,
        background: CONSTANTS.BACKGROUND_COLORS.slicer3D
      }
    }
  ]

  renderingEngine.setViewports(viewportInputArray)

  // Set the tool group on the viewports
  toolGroup.addViewport(viewportId, renderingEngineId)

  // Define a volume in memory
  const volume = await volumeLoader.createAndCacheVolume(volumeId, {
    imageIds
  })

  // Set the volume to load
  volume.load()
  viewport = renderingEngine.getViewport(viewportId)

  setVolumesForViewports(renderingEngine, [{ volumeId }], [viewportId]).then(
    () => {
      viewport.setProperties({
        preset: 'CT-Bone'
      })
      viewport.render()
      toolGroup.setToolActive(OrientationMarkerTool.toolName)
    }
  )
}

onMounted(() => {
  run()
})
const parts = CONSTANTS.VIEWPORT_PRESETS.map((preset) => preset.name)
const activePart = ref('')
const handleClick = part => {
  viewport.setProperties({ preset: part })
  viewport.render()
  activePart.value = part
}
</script>

<template>
  <div>
    <n-button v-for="part in parts"
              :class="activePart === part ? 'bg-red-300': ''"
              @click="handleClick(part)"
    >{{ part }}
    </n-button>
  </div>
  <div>
    tips:
    1.左键 + 滑动
    2.按住鼠标滚轮+ 滑动
    3. 鼠标右键+ 滑动。
  </div>
  <div class="w-[600px] h-[450px] bg-transparent  relative" ref="renderContainerRef">
  </div>
</template>

<style scoped>

</style>
